<template>
    <div style="width:100%">
        <el-form>
            <el-form-item label="港口：">
                <!-- <select-port v-model="condition['search_EQ_portCode']" ref="port"  @select="changePort"></select-port> -->
                <el-select v-model="portModelCode" @change="changePort" placeholder="请选择" multiple
                           clearable>
                    <el-option v-for="item in portList" :key="item.code" :label="item.name" :value="item.code">
                    </el-option>
                </el-select>
            </el-form-item>
            <!-- <el-form-item label="统计说明：">
                装卸船按封航日期统计；装拆箱按完成日期统计；提箱放行按放行时间统计；
            </el-form-item>
            <el-form-item label="单位：">
                标箱（TEU）、重量（吨）
            </el-form-item> -->
        </el-form>
        <div class="mb-10 z-alert">
            <span class="el-icon-info" style="color: #409efe;margin-left: 10px"></span>
            统计说明：装卸船按封航日期统计；装拆箱按完成日期统计；提箱放行按放行时间统计；单位：标箱（TEU）、重量（吨）
        </div>
        <div class="content">
            <div class="content-c content-lf">
                <z-day ref="day" :getData="getData" :portCodes="portModelCode" class="to-center"
                       @set-day="v=>loadDataCount(v)"></z-day>
            </div>
            <div class="content-c content-lf" style="float:right;">
                <div class="to-center">
                    <div id="pie" style="height: 345px" class="classCount-style"></div>
                </div>
            </div>
            <div class="content-c content-m con-t report-popper">
                <div class="to-center-an" style="overflow:hidden;">
                    <span class="span-line">
                        装船理箱统计
                    </span>
                    <el-button type="primary" class="take-ship" @click="account(1)">按船代统计</el-button>
                    <div style="width:100%;margin-top: 52px;">
                        <div class="m-l m-common">
                            <span>装船总理箱量 <br/><i>{{ZXC.ZC.totle}} <b>TEU</b> </i></span>
                        </div>
                        <el-popover placement="bottom" width="460" :value='true' popper-class="zx-pop" :offset="offset">
                            <div class="ship-dea">
                                <ul class="dea-ul">
                                    <li>港装箱量&ensp;&ensp;<i class="dea-num">{{ZXC.ZC.gzTeu}}</i> TEU</li>
                                    <li>
                                        <div class="dea-bor">|</div>
                                        厂装箱量&ensp;&ensp;<i class="dea-num">{{ZXC.ZC.czTeu}}</i>
                                        TEU
                                    </li>
                                    <li>
                                        <div class="dea-bor">|</div>
                                        水转水箱量&ensp;<i class="dea-num">{{ZXC.ZC.change}}</i>
                                        TEU
                                    </li>
                                </ul>
                            </div>
                            <div class="m-c m-common" slot="reference">
                                <span>重箱量 <i>{{ZXC.ZC.heavy}} <b>TEU</b></i></span>
                            </div>
                        </el-popover>
                        <!-- <el-popover placement="bottom-end" width="460" trigger="hover" :offset="offset2">
                            <div class="ship-dea">
                                <ul class="dea-ul">
                                    <li >港装箱量&ensp;&ensp;<i class="dea-num">17482</i> TEU</li><li ><div class="dea-bor">|</div>厂装箱量&ensp;&ensp;<i class="dea-num">17482</i> TEU</li><li ><div class="dea-bor">|</div>水转水箱量&ensp;<i class="dea-num">17482</i> TEU</li>
                                </ul>
                            </div> -->
                        <div class="m-r m-common" slot="reference">
                            <span>空箱量 <i>{{ZXC.ZC.empty}} <b>TEU</b></i></span>
                        </div>
                        <!-- </el-popover> -->
                    </div>
                </div>
            </div>
            <div class="content-c content-m con-t report-popper" style="float:right;">
                <div class="to-center-an" style="overflow:hidden;">
                    <span class="span-line">
                        卸船理箱统计
                    </span>
                    <el-button type="primary" class="take-ship ship-gre" @click="account(2)">按船代统计</el-button>
                    <div style="width:100%;margin-top: 52px;">
                        <div class="m-l m-common m-color">
                            <span>卸船总理箱量 <br/><i style="color: #7fd094;">{{ZXC.XC.totle}} <b>TEU</b> </i></span>
                        </div>
                        <div class="m-c m-common" slot="reference">
                            <span>重箱量 <i style="color: #7fd094;">{{ZXC.XC.heavy}} <b>TEU</b></i></span>
                        </div>
                        <div class="m-r m-common" slot="reference">
                            <span>空箱量 <i style="color: #7fd094;">{{ZXC.XC.empty}} <b>TEU</b></i></span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="content-c content-d con-t">
                <div class="to-center-an" style="overflow:hidden;">
                    <span class="span-line">
                        装拆箱作业统计
                    </span>
                    <table border="0" class="an-table" style="border-collapse:collapse;">
                        <tr v-for="(x,k) in ZCX.cargo" :key="k">
                            <td class="t-l">
                                <span>{{x.planType|_filterPlanReport}}</span>
                            </td>
                            <td class="t-r">
                                <span>
                                    <ul>
                                        <li><i>{{x.totle}}</i> TEU</li><li v-if="x.planType!=='Pass'"><i>{{x.cargoCount}}</i> 件</li><li
                                        v-if="x.planType!=='Pass'"><i>{{x.cargoWeight | keepTwoNum}}</i> 吨</li>
                                    </ul>
                                </span>
                            </td>
                            <td style="width: 20%">
                                <el-button type="primary" class="take-ship" @click="accountByNew(x.planType)" v-if="x.planType != 'Total'">按船代统计</el-button>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
            <div class="content-c content-d con-t report-popper" style="float:right;">
                <div class="to-center-an" style="overflow:hidden;">
                    <span class="span-line">
                        特殊作业统计
                    </span>
                    <div style="width:100%;margin-top: 52px;">
                        <div class="m-l m-common m-color2" style="width:23%">
                            <span>合计 <br/><i style="color: #ff3300;">{{ZCX.special.total}} <b>TEU</b> </i></span>
                        </div>
                        <el-popover placement="bottom" width="460" popper-class="zx-pop" :value='true' :offset="offset">
                            <div class="ship-dea">
                                <ul class="dea-ul">
                                    <li>进口熏蒸量&ensp;&ensp;<i class="dea-num">{{ZCX.special.imported}}</i> TEU</li>
                                    <li>
                                        <div class="dea-bor">|</div>
                                        出口熏蒸量&ensp;&ensp;<i class="dea-num">{{ZCX.special.exit}}</i>
                                        TEU
                                    </li>
                                </ul>
                            </div>
                            <div class="m-c m-common" slot="reference" style="width:23%">
                                <span>熏蒸量 <i style="color: #ff3300;">{{ZCX.special.xzTeu}} <b>TEU</b></i></span>
                            </div>
                        </el-popover>
                        <div class="m-r m-common" slot="reference" style="width:23%">
                            <span>二转 <i style="color: #ff3300;">{{ZCX.special.ezTeu}} <b>TEU</b></i></span>
                        </div>
                        <div class="m-r m-common" slot="reference" style="width:23%">
                            <span>其他 <i style="color: #ff3300;">{{ZCX.special.otherTeu}} <b>TEU</b></i></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <el-dialog title="装/卸船理箱-船代统计" :visible.sync="showZX" width="1200px">
            <el-form>
                <el-row>
                    <el-col :span="24">
                        <el-button @click="handleExport">导出</el-button>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item>
                            <span class="acc-title">作业港口：{{workPort?workPort:'全部'}}</span>
                            <span class="acc-title">作业日期：{{condition.search_GTE_dateTime}}</span>
                            <span class="acc-title">作业类型：{{workType}}</span>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div class="content">
                <div class="content-c" style="height:440px;">
                    <div class="to-center">
                        <div id="pie2" style="height: 400px" class="classCount-style"></div>
                    </div>
                </div>
                <div class="content-c" style="float:right;height:440px;border:0;">
                    <div class="to-center right-table" style="margin-top: 0;">
                        <el-table :data="ZXCarr" max-height="440px" show-summary border style="width: 100%;">
                            <el-table-column label="船代" prop="shipAgentName" align="center"></el-table-column>
                            <el-table-column label="标箱量" prop="teu" align="center"></el-table-column>
                            <el-table-column label="20" prop="t20" align="center"></el-table-column>
                            <el-table-column label="40" prop="t40" align="center"></el-table-column>
                            <el-table-column label="艘次" prop="ship" align="center"></el-table-column>
                        </el-table>
                    </div>
                </div>
            </div>
        </el-dialog>
        <el-dialog title="装/卸/提箱理货-船代统计" :visible.sync="showZXTX" width="1200px">
            <el-form>
                <el-row>
                    <el-col :span="24">
                        <el-button @click="handleExportNew">导出</el-button>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item>
                            <span class="acc-title">作业港口：{{workPort?workPort:'全部'}}</span>
                            <span class="acc-title">作业日期：{{condition.search_GTE_dateTime}}</span>
                            <span class="acc-title">作业类型：{{ZXTForm.ZXTType}}</span>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div class="content">
                <div class="content-c" style="height:440px;">
                    <div class="to-center">
                        <div id="pie3" style="height: 400px" class="classCount-style"></div>
                    </div>
                </div>
                <div class="content-c" style="float:right;height:440px;border:0;">
                    <div class="to-center right-table" style="margin-top: 0;">
                        <el-table :data="ZXTForm.ZXTCarr" max-height="440px" show-summary border style="width: 100%;">
                            <el-table-column label="船代" prop="shipAgentName" align="center"></el-table-column>
                            <el-table-column label="标箱量" prop="teu" align="center"></el-table-column>
                            <el-table-column label="20" prop="t20" align="center"></el-table-column>
                            <el-table-column label="40" prop="t40" align="center"></el-table-column>
                            <el-table-column label="艘次" prop="ship" align="center"></el-table-column>
                        </el-table>
                    </div>
                </div>
            </div>
        </el-dialog>
    </div>
</template>
<script>
    import axios from 'axios';
    import { getCookie, Token } from "@/utils/cookie";
    import { getWLPort } from "@/api/port/port";

    import selectPort from '@/components/select/selectPort'
    import zDay from '@/components/calendar/z-day-report'
    import {
        getDayReport,
        getDayReportZX,
        getDayReportCX,
        getDayReportCD,
        ImportExport,
        cargoplancount
    } from "@/api/shipPlan/shipPlan";
    import {
        getLocalTime
    } from "@/utils/dateFormat";
    import { newExportExcel } from "@/utils/newExport";
    import { portCode } from "@/assets/dict";
    // 引入基本模板
    let echarts = require("echarts/lib/echarts");
    import "echarts/theme/macarons";
    // 引入提示框和title组件
    require("echarts/lib/component/tooltip");
    require("echarts/lib/component/title");
    require("echarts/lib/component/legend");
    // require("echarts/lib/component/series");
    require("echarts/lib/chart/line");
    require("echarts/lib/chart/pie");
    require("echarts/lib/chart/bar");
    export default {
        name: "理货作业日报",
        components: {
            selectPort,
            zDay
        },
        data() {
            return {
                getData: getDayReport,
                condition: {},
                offset: 12,
                offset2: 0,
                offset3: -44,
                ZXC: {
                    ZC: {},
                    XC: {}
                },
                ZCX: {
                    special: {},
                    cargo: []
                },
                lineData: [],
                line1: [],
                line2: [],
                line3: [],
                line4: [],
                line5: [],
                line6: [],
                condition: {
                    search_GTE_dateTime: getLocalTime(new Date(), 'YYYY-MM-DD'),
                    search_IN_portCode: ''
                },
                showZX: false,
                showZXTX:false,
                workPort: '',
                workType: '',
                ZXCdea: {
                    title: [],
                    data: []
                },
                ZXCarr: [],
                showTitle: 1,
                portList:[],
                ZXTForm:{
                    ZXTType:'',
                    excelType:'',
                    ZXTCarr:[],
                    ZXTdea: {
                        title: [],
                        data: []
                    }
                },
                portModelCode : ''
            }
        },
        mounted() {
            this.$refs.day.getMonthDay()
            this.loadPortList()
            // this.loadData()
        },
        filters : {
            keepTwoNum(val) {
                val = Number(val);
                return val.toFixed(2)
            }
        },
        methods: {
            loadPortList(){
                getWLPort().then(res => {
                    this.portList = res.data.aaData
                })
            },
            loadData() {
                getDayReportCX(this.condition).then(res => {
                    this.ZCX = res.data
                    let a = {}
                    for (let index = 0; index < this.ZCX.cargo.length; index++) {
                        if (this.ZCX.cargo[index].planType === "Total") {
                            a = this.ZCX.cargo[index]
                            this.ZCX.cargo.splice(index, 1)
                        }
                    }
                    this.ZCX.cargo.unshift(a)
                })
                getDayReportZX(this.condition).then(res => {
                    this.ZXC = res.data
                })
                getDayReport(this.condition).then(res => {
                    this.lineData = []
                    this.line1 = []
                    this.line2 = []
                    this.line3 = []
                    this.line4 = []
                    this.line5 = []
                    this.line6 = []
                    res.data.aaData.forEach(element => {
                        this.lineData.push(element.date)
                        this.line1.push(element.zcTeu)
                        this.line2.push(element.xcTeu)
                        this.line3.push(element.zxTeu)
                        this.line4.push(element.cxTeu)
                        this.line5.push(element.tsTeu)
                        this.line6.push(element.passTeu)
                    })
                    this.initWork()
                })
            },
            changePort(val) {
                this.workPort = ''
                if (this.portModelCode && this.portModelCode.length > 0) {
                    let portName = ''
                    this.portModelCode.forEach((column, index) => {
                        portName = portName + "," + portCode.get(column)
                    })
                    this.workPort = portName.substring(1)
                }
                let portGoCode = this.arrayToString(this.portModelCode)
                this.condition.search_IN_portCode = portGoCode
                // this.loadData()
                this.$nextTick(() => {
                    this.$refs.day.getMonthDay()
                })
            },
            loadDataCount(data) {
                this.condition.search_GTE_dateTime = data.date
                this.loadData()
            },
            initWork() {
                const myChart = echarts.init(document.getElementById('pie'))
                let year = new Date(this.condition.search_GTE_dateTime).getFullYear()
                let month = new Date(this.condition.search_GTE_dateTime).getMonth() + 1
                let title = year + '年' + month + '月作业趋势'
                const x = this.lineData
                const line1 = this.line1
                const line2 = this.line2
                const line3 = this.line3
                const line4 = this.line4
                const line5 = this.line5
                const line6 = this.line6
                const option = {
                    title: {
                        text: title,
                        left: "center",
                        textStyle: {
                            align: 'center'
                        },
                        subtext: "单位：重量(吨)",
                        subtextStyle: {
                            align: 'right'
                        }
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        bottom: 0,
                        data: ['装船', '卸船', '装箱', '拆箱', '特殊作业', '提箱放行']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '50',
                        containLabel: true
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        // type: 'category',
                        // min: 6,
                        data: x
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        name: '装船',
                        type: 'line',
                        itemStyle: {
                            color: '#4ca5ff'
                        },
                        data: line1
                    },
                        {
                            name: '卸船',
                            type: 'line',
                            itemStyle: {
                                color: '#6dc989'
                            },
                            data: line2
                        },
                        {
                            name: '装箱',
                            type: 'line',
                            itemStyle: {
                                color: '#2ccbca'
                            },
                            data: line3
                        },
                        {
                            name: '拆箱',
                            type: 'line',
                            itemStyle: {
                                color: '#ffa800'
                            },
                            data: line4
                        },
                        {
                            name: '特殊作业',
                            type: 'line',
                            itemStyle: {
                                color: '#b69cf3'
                            },
                            data: line5
                        },
                        {
                            name: '提箱放行',
                            type: 'line',
                            itemStyle: {
                                color: '#ff6067'
                            },
                            data: line6
                        }
                    ]
                }
                myChart.setOption(option, true)

            },
            initNum() {
                const myChart2 = echarts.init(document.getElementById('pie2'))
                let x = this.ZXCdea.title
                let y = this.ZXCdea.data
                const option2 = {
                    title: {
                        text: '标箱量',
                        left: 'center',
                        subtext: "单位：TEU",
                        subtextStyle: {
                            align: 'right'
                        }
                    },
                    color: ['#3398DB'],
                    legend: {
                        bottom: 0,
                        data: ['标箱量']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '50',
                        containLabel: true
                    },
                    xAxis: [{
                        // type: 'category',
                        data: x,
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLabel: {
                            show: true,
                            rotate: 60,
                        },
                        axisTick: {
                            interval: 0
                        }
                    }],
                    yAxis: [{
                        type: 'value'
                    }],
                    series: [{
                        name: '标箱量',
                        type: 'bar',
                        barWidth: '30',
                        data: y
                    }]
                };
                myChart2.setOption(option2, true)

            },
            account(x) {
                if (x === 1) {
                    this.workType = '装船'
                } else {
                    this.workType = '卸船'
                }
                let a = {
                    'search_GTE_dateTime': this.condition.search_GTE_dateTime,
                    'search_IN_portCode': this.arrayToString(this.portModelCode),
                    'search_EQ_planType': this.workType === '装船' ? 'ZC' : 'XC'
                }
                getDayReportCD(a).then(res => {
                    this.ZXCdea = {
                        title: [],
                        data: []
                    }
                    this.ZXCarr = res.data.aaData
                    res.data.aaData.forEach(element => {
                        this.ZXCdea.title.push(element.shipAgentName)
                        this.ZXCdea.data.push(element.teu)
                    });
                    this.showZX = true
                    this.$nextTick(() => {
                        this.initNum()
                    })
                })
            },
            arrayToString:function(arr){
                let value = ""
                if (arr != null && arr != "" && arr.length > 0){
                    arr.forEach((column, index) => {
                        value = value + "," + column
                    })
                    value = value.substring(1)
                }
                return value
            },
            accountByNew(type){
                if (type == 'Pass'){
                    type = 'pass'
                    this.ZXTForm.ZXTType = '提箱放行'
                } else if(type == 'ZX'){
                    this.ZXTForm.ZXTType = '装箱'
                } else {
                    this.ZXTForm.ZXTType = '拆箱'
                }
                this.ZXTForm.excelType = type
                let params = {
                    'search_GTE_dateTime': this.condition.search_GTE_dateTime,
                    'search_IN_portCode': this.arrayToString(this.portModelCode),
                    'search_EQ_planType' : type
                }
                cargoplancount(params).then(res => {
                    this.ZXTForm.ZXTdea = {
                        title: [],
                        data: []
                    }
                    this.ZXTForm.ZXTCarr = res.data.aaData
                    res.data.aaData.forEach(element => {
                        this.ZXTForm.ZXTdea.title.push(element.shipAgentName)
                        this.ZXTForm.ZXTdea.data.push(element.teu)
                    });
                    this.showZXTX = true
                    this.$nextTick(() => {
                        this.initNumNew()
                    })
                })
            },
            handleExportNew(){
                var instanceNew = axios.create({
                    baseURL: this.DERIVE.deriveUrl, // 开发环境跨域配置的地址
                    timeout: 30000, // 请求超时时间
                    responseType: 'blob',
                    headers: {
                        "Authorization": getCookie(Token),
                        "Content-Type": "application/json"
                    }
                });
                instanceNew.interceptors.response.use(
                    response => {
                        this.filename = decodeURI(response.headers['content-disposition'].slice(20));
                        return response.data;
                    },
                    error => {
                        return Promise.reject(error);
                    }
                );
                instanceNew.get('/report/cargoplancount/shipAgentExcel', {
                    params: {
                        search_GTE_dateTime: this.condition.search_GTE_dateTime,
                        search_IN_portCode: this.arrayToString(this.portModelCode),
                        search_EQ_planType: this.ZXTForm.excelType,
                        search_EQ_ExcelPortName: this.workPort
                    }
                }).then(res => {
                    var blob = new Blob([res], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8' }); //application/vnd.openxmlformats-officedocument.spreadsheetml.sheet这里表示xlsx类型
                    var downloadElement = document.createElement('a');
                    var href = window.URL.createObjectURL(blob); //创建下载的链接
                    downloadElement.href = href;
                    downloadElement.download = this.filename; //下载后文件名
                    document.body.appendChild(downloadElement);
                    downloadElement.click(); //点击下载
                    document.body.removeChild(downloadElement); //下载完成移除元素
                    window.URL.revokeObjectURL(href); //释放掉blob对象
                })
            },
            initNumNew() {
                const myChart3 = echarts.init(document.getElementById('pie3'))
                let x = this.ZXTForm.ZXTdea.title
                let y = this.ZXTForm.ZXTdea.data
                const option3 = {
                    title: {
                        text: '标箱量',
                        left: 'center',
                        subtext: "单位：TEU",
                        subtextStyle: {
                            align: 'right'
                        }
                    },
                    color: ['#3398DB'],
                    legend: {
                        bottom: 0,
                        data: ['标箱量']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '50',
                        containLabel: true
                    },
                    xAxis: [{
                        // type: 'category',
                        data: x,
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLabel: {
                            show: true,
                            rotate: 60,
                        },
                        axisTick: {
                            interval: 0
                        }
                    }],
                    yAxis: [{
                        type: 'value'
                    }],
                    series: [{
                        name: '标箱量',
                        type: 'bar',
                        barWidth: '30',
                        data: y
                    }]
                };
                myChart3.setOption(option3, true)

            },
            // ltt 导出
            handleExport() {
                var instance = axios.create({
                    baseURL: this.DERIVE.deriveUrl, // 开发环境跨域配置的地址
                    timeout: 30000, // 请求超时时间
                    responseType: 'blob',
                    headers: {
                        "Authorization": getCookie(Token),
                        "Content-Type": "application/json"
                    }
                });
                instance.interceptors.response.use(
                    response => {
                        this.filename = decodeURI(response.headers['content-disposition'].slice(20));
                        return response.data;
                    },
                    error => {
                        return Promise.reject(error);
                    }
                );
                if (this.workType === '装船') {
                    instance.get('/report/shipAgentExcel', {
                        params: {
                            search_GTE_dateTime: this.condition.search_GTE_dateTime,
                            search_IN_portCode: this.arrayToString(this.portModelCode),
                            search_EQ_planType: 'ZC',
                            search_EQ_ExcelPortName: this.workPort
                        }
                    }).then(res => {
                        var blob = new Blob([res], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8' }); //application/vnd.openxmlformats-officedocument.spreadsheetml.sheet这里表示xlsx类型
                        var downloadElement = document.createElement('a');
                        var href = window.URL.createObjectURL(blob); //创建下载的链接
                        downloadElement.href = href;
                        downloadElement.download = this.filename; //下载后文件名
                        document.body.appendChild(downloadElement);
                        downloadElement.click(); //点击下载
                        document.body.removeChild(downloadElement); //下载完成移除元素
                        window.URL.revokeObjectURL(href); //释放掉blob对象
                    })
                } else {
                    instance.get('/report/shipAgentExcel', {
                        params: {
                            search_GTE_dateTime: this.condition.search_GTE_dateTime,
                            search_IN_portCode: this.arrayToString(this.portModelCode),
                            search_EQ_planType: 'XC',
                            search_EQ_ExcelPortName: this.workPort
                        }
                    }).then(res => {
                        var blob = new Blob([res], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8' }); //application/vnd.openxmlformats-officedocument.spreadsheetml.sheet这里表示xlsx类型
                        var downloadElement = document.createElement('a');
                        var href = window.URL.createObjectURL(blob); //创建下载的链接
                        downloadElement.href = href;
                        downloadElement.download = this.filename; //下载后文件名
                        document.body.appendChild(downloadElement);
                        downloadElement.click(); //点击下载
                        document.body.removeChild(downloadElement); //下载完成移除元素
                        window.URL.revokeObjectURL(href); //释放掉blob对象
                    })
                }


                // let map = new Map();
                // map.set("shipAgentName", "船代")
                // map.set("teu", "标箱量")
                // let exportRecords = []
                // this.ZXCarr.forEach(record => {
                //     let exportRecord = {}
                //     for (let [key, value] of map.entries()) {
                //         exportRecord[value] = record[key]
                //     }
                //     exportRecords.push(exportRecord)
                // })
                // newExportExcel('船代统计', exportRecords)
            }
        }

    }

</script>
<style lang="scss" scoped>
    .z-alert {
        font-size: 14px;
        background: #e8f8fe;
        border: 1px solid #a3dcff;
        height: 32px;
        line-height: 32px;
        width: 100%;
        max-width: 1060px;
        padding: 0 20px;
        padding-left: 3px;
    }

    .content {
        width: 100%;

        .content-c {
            width: 49%;
            display: inline-block;
            border: 1px solid #dddddd;
        }

        .con-t {
            margin-top: 20px;
        }

        .content-lf {
            height: 435px;
        }

        .content-m {
            height: 240px;
        }

        .content-d {
            height: 280px;
        }
    }

    .to-center {
        margin: 20px auto;
    }

    .to-center-an {
        margin: 20px;
    }

    .span-line {
        position: relative;
        padding-left: 15px;
        font-size: 16px;
        font-weight: 600;
        float: left;
    }

    .span-line:before {
        content: "";
        position: absolute;
        background: #409eff;
        width: 6px;
        height: 69%;
        left: 0px;
        top: 20%;
    }

    .take-ship {
        float: right;
    }

    .m-common {
        height: 98px;
        display: inline-block;

        span {
            text-align: center;
            width: 100%;
            display: block;
            padding-top: 25px;
            font-size: 14px;

            i {
                font-style: normal;
                margin-top: 8px;
                display: block;
                font-size: 18px;
                font-weight: bold;
                color: #409eff;

                b {
                    font-weight: normal;
                }
            }
        }
    }

    .m-l {
        width: 140px;
        background: #e8f8fe;
        float: left;
    }

    .m-c {
        margin-left: 10px;
        width: 160px;
        background: #f5f4f4;
    }

    .m-r {
        width: 160px;
        margin-left: 10px;
        background: #f5f4f4;
        text-align: center;
    }

    .ship-dea {
        font-size: 13px;
        background: #f5f4f4;
        width: 100%;

        .dea-ul {
            // display: inline-block;
            text-align: center;

            li {
                display: inline-block;
                width: 33.3%;

                .dea-num {
                    color: #ff3300;
                    font-weight: bold;
                    font-style: normal;
                }
            }

            .dea-bor {
                float: left;
                // color: #409eff;
                line-height: 17px;
                font-size: 10px;
                // width: 2px;
                // height: 12px;
                // margin-top: 3px;
            }
        }
    }

    .ship-gre {
        background-color: #7fd094;
        border-color: #7fd094;
    }

    .ship-gre-font {
        color: #7fd094;
    }

    .m-color {
        background-color: #e7f8eb;
    }

    .ship-org {
        background-color: #fcebda;
        border-color: #fcebda;
    }

    .m-color2 {
        background-color: #fcebda;
        border-color: #fcebda;
    }

    .content-d {
        .ship-dea {
            font-size: 13px;
            background: #f5f4f4;
            width: 100%;

            .dea-ul {
                // display: inline-block;
                text-align: center;

                li {
                    display: inline-block;
                    width: 50%;

                    .dea-num {
                        color: #ff3300;
                        font-weight: bold;
                        font-style: normal;
                    }
                }

                .dea-bor {
                    float: left;
                    // color: #409eff;
                    line-height: 17px;
                    font-size: 10px;
                    // width: 2px;
                    // height: 12px;
                    // margin-top: 3px;
                }
            }
        }
    }

    .an-table {
        width: 100%;
        margin-top: 32px;

        tr {
            height: 54px;
            font-size: 16px;

            .t-l {
                width: 30%;

                span {
                    font-weight: bold;
                }
            }

            .t-r {
                width: 50%;

                span {
                    font-size: 16px;
                }

                ul {
                    width: 100%;
                    border-bottom: 1px solid #dddddd;

                    li {
                        display: inline-block;
                        width: 33.3%;
                        height: 45px;
                        line-height: 45px;
                        text-align: center;

                        i {
                            color: #409eff;
                            font-weight: bold;
                            font-style: normal;
                        }
                    }
                }
            }
        }
    }

    .acc-title {
        margin-left: 30px;
    }
    .right-table /deep/ .el-table__body-wrapper{
        max-height: 368px!important;
    }
</style>
